import React, { Component } from 'react';
import { Card, Table, Modal, Button, message } from 'antd';
import {connect} from 'react-redux';
import * as actions from './store/actions';
import {pagination} from '../../util';

import './style.less';

class BasicTable extends Component {
  constructor(props){
    super(props);
    this.state = {
      columns: [   // 表头
        {
          title: 'id',
          dataIndex: 'id'
        },
        {
          title: '用户名',
          dataIndex: 'userName'
        },
        {
          title: '性别',
          dataIndex: 'sex',
          render(sex){
            return sex===1?'男':'女'
          }
        },
        {
          title: '状态',
          dataIndex: 'state',
          render(state){
            const config = {
              '1': '咸鱼一条',
              '2':'风华浪子',
              '3':'北大才子',
              '4':'创业者',
              '5': '未名湖畔'
            };
            return config[state];
          }
        },
        {
          title: '爱好',
          dataIndex: 'interest',
          render(interest){
            const config = {
              '1': '游泳',
              '2':'打篮球',
              '3':'踢足球',
              '4':'跑步',
              '5':'爬山',
              '6':'骑行',
              '7':'桌球',
              '8':'麦霸',
            };
            return config[interest];
          }
        },
        {
          title: '生日',
          dataIndex: 'birthday'
        },
        {
          title: '地址',
          dataIndex: 'address'
        },
        {
          title: '早起时间',
          dataIndex: 'time'
        },
      ],
      dataSource: [
        {
          id: 0,
          key:0,
          userName: 'Jack',
          sex: '1',
          state: '1',
          interest: '1',
          birthday: '2000-01-01',
          address: '上海市徐汇区漕河泾开发区',
          time: '09:00'
        },
        {
          id: 1,
          key:1,
          userName: 'Tom',
          sex: '1',
          state: '1',
          interest: '1',
          birthday: '2000-01-01',
          address: '上海市徐汇区漕河泾开发区',
          time: '09:00'
        },
        {
          id: 2,
          key:2,
          userName: 'Lily',
          sex: '1',
          state: '1',
          interest: '1',
          birthday: '2000-01-01',
          address: '上海市徐汇区漕河泾开发区',
          time: '09:00'
        }
      ],
      dataSource2: [],
      selectedRowKeys: 0,
      selectedItem: {},
      selectedRows: []
    }
  }
  render(){
    const {columns, dataSource,selectedRowKeys} = this.state;
    const {basicTableData, pagination} = this.props;
    const rowCheckSelection = {
      type: 'checkbox',
      selectedRowKeys,
      onChange:(selectedRowKeys, selectedRows)=>{
        this.setState({
          selectedRowKeys,
          selectedRows
        })
      }
    };
    /*const rowSelection = {
      type: 'radio',
      selectedRowKeys
    }*/
    return (
      <div>
        <Card title="基础表格" className="pinlor-cards">
          <Table
            bordered
            columns={columns}
            pagination={false}
            dataSource={dataSource}/>
        </Card>
        <Card title="动态数据渲染表格" className="pinlor-cards">
          <div style={{marginBottom: 10}}>
          <Button type="danger" onClick={this.handleDelete}>删除</Button>
          </div>
          <Table
            bordered
            columns={columns}
            dataSource={basicTableData}
            pagination={false}
            onRow={
              (record,index)=>{
                return {
                  onClick: ()=>{
                    this.onRowClick(record)
                  }
                }
              }
            }
            rowSelection={rowCheckSelection}/>
        </Card>
        <Card title="表格分页" className="pinlor-cards">
          <Table
            bordered
            columns={columns}
            dataSource={basicTableData}
            pagination={pagination}/>
        </Card>
      </div>
    )
  }

  componentDidMount(){
    this.props.getBasicTableData();
  }

  onRowClick = record=>{
    // 点击表格行选中
    const selectKey = [record.id];
    Modal.info({
      title: '信息',
      content: `用户名：${record.userName},用户爱好：${record.interest}`
    })
    this.setState({
      selectedRowKeys: selectKey,
      selectedItem: record
    })
  }

  handleDelete=()=>{
    // 删除选中的数据
    const rows = this.state.selectedRows;
    if(rows.length === 0){
      message.success('没选中任何数据');
      return;
    }
    let ids = [];
    rows.forEach(item=>{
      ids.push(item.id);
    })
  
    Modal.confirm({
      title: '删除提示',
      content: `您确定要删除这些数据吗?${ids.join(',')}`,
      onOk:()=>{
        message.success('删除成功');
      }
    })
  }
}

const mapStateToProps = state=>{
  const {basicTableData} = state.basicTable;
  return {
    basicTableData: basicTableData.result,
    pagination: pagination(basicTableData, current=>{
      console.log(current)
    })
  }
}
const mapDispatchToProps = dispatch=>({
  getBasicTableData(){
    dispatch(actions.getBasicTableData());
  }
})
export default connect(mapStateToProps, mapDispatchToProps)(BasicTable);
